<template>
  <!-- 查看报文弹窗 -->
  <Modal
    :title="titles"
    v-model:open="reportVisible"
    width="30%"
    :mask-closable="false"
    :keyboard="false"
    :footer="null"
    centered
    destroy-on-close
  >
    <JsonViewer
      :value="messageData"
      :expand-depth="5"
      :copyable="{ copyText: '复制', copiedText: '已复制!' }"
      boxed
      expanded
    ></JsonViewer>
  </Modal>
</template>
<script setup lang="tsx">
import { Modal } from 'ant-design-vue';
import JsonViewer from 'vue-json-viewer';

interface Props {
  titles: string;
  messageData: any;
}
const props = defineProps<Props>();
const reportVisible = defineModel('reportVisible');
</script>

<style>
.jv-key {
  color: #fff !important;
}
.jv-push > .jv-object {
  color: #fff !important;
}
</style>
